<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index page</title>
</head>
<!--<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css">-->
<!--<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>-->
<link rel="stylesheet" href="{{url_for('static', filename='layui/css/layui.css')}}">
<script type="text/javascript" src="{{url_for('static', filename='layui/layui.js')}}"></script>
<style>
    html, body, .layui-container {
        /*width: 100%;*/
        height: 100%;
    }

    body {
        overflow: hidden;
    }

    .loading {
        width: 100%;
        height: 100%;
    }

    .loading img {
        margin: auto;
        position: absolute;
        top: 50%;
        /*right: 0;*/
        /*bottom: 0;*/
        left: 50%;
        z-index: 999;
        transform: translate(-50%, -50%);
    }

    /*这里是页面正常显示部分，全部设为display:none*/
    .video_box {
        display: none;
    }

    textarea {
        font-size: large;
    }

</style>
<body>
<div class="loading">
    <!--这里放你的loading时显示的动画或者文字-->
    <img src="{{url_for('static',filename='imgs/loading.gif')}}" alt="">
</div>
<div class="layui-container video_box">
    <div class="layui-tab" lay-filter="tab">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">百度新闻</li>
            <li lay-id="2">今日头条</li>
            <li lay-id="3">繁简转换</li>
            <li lay-id="4">邮编查询</li>
            <li lay-id="5">驾考题库</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <button id="fre" class="layui-btn">点击刷新</button>
                <div id="news-list"></div>
            </div>
            <div class="layui-tab-item">
                <button id="fre2" class="layui-btn">点击刷新</button>
                <div id="news-list2"></div>
            </div>
            <div class="layui-tab-item">
                <div id="trans">
                    <div>
                        <select name="option" id="option">
                            <option value="0">自动</option>
                            <option value="1">简->繁</option>
                            <option value="2">繁->简</option>
                        </select>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md5 layui-col-sm5 layui-col-xs5 layui-col-lg5">
                            <textarea name="first" id="first" cols="30" rows="10" class="layui-textarea"
                                      style="resize: none"></textarea>
                        </div>
                        <div class="layui-col-md2  layui-col-sm2 layui-col-xs2 layui-col-lg2">
                            <div style="margin-top: 50%; text-align: center">
                                <button class="layui-btn" id="query">查询</button>
                            </div>
                        </div>
                        <div class="layui-col-md5 layui-col-sm5 layui-col-xs5 layui-col-lg5">
                            <textarea readonly name="second" id="second" cols="30" rows="10" class="layui-textarea"
                                      style="resize: none"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div id="post">
                    <div>
                        <blockquote class="layui-elem-quote layui-text">你可以通过如下选项筛选数据，请注意仅省份、城市、区县支持模糊匹配，邮编和区号不支持
                        </blockquote>
                    </div>
                    <div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" placeholder="城市" id="city">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" placeholder="区县" id="area">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" placeholder="省份"
                                   id="province">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" placeholder="邮编"
                                   id="post_code">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" autocomplete="off" placeholder="区号"
                                   id="area_code">
                        </div>
                        <br><br>
                        <div class="layui-btn-group">
                            <button type="button" class="layui-btn-sm layui-btn" id="search">查询</button>
                            <button type="button" class="layui-btn-sm layui-btn-normal layui-btn" id="reset">重制
                            </button>
                        </div>
                    </div>
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>省份</th>
                            <th>城市</th>
                            <th>区/县</th>
                            <th>邮编</th>
                            <th>区号</th>
                        </tr>
                        </thead>
                        <tbody id="post-content">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-tab-item">
                <div id="car-test">
                    <div>
                        <button class="layui-btn" id="ran-gen5">随机生成50道题</button>
                        <button class="layui-btn" id="ran-gen10">随机生成100道题</button>
                        <div class="layui-input-inline">
                            <input type="number" id="car-test-num" placeholder="题数" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <button class="layui-btn layui-btn-normal" id="ran-gen">随机生成</button>
                    </div>
                    <div id="car-test-content">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="{{url_for('static',filename='index.js')}}"></script>
</html>